<template>
    <div id="tmpl">
        <div id="postcomment">
            <h3>提交评论</h3>
            <p class="p"></p>
            <textarea placeholder="请输入评论的内容" v-model="postconent"></textarea>
            <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
        </div>
        <div id="list">
            <h3>评论列表</h3>
            <p class="p"></p>
            <div v-for="(item,index) in list">
                <div class="title">
                    <span>第{{index + 1}}楼:</span>
                    <span>用户：{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-text="item.content"></li>
                </ul>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
            pageindex:1,
            postconent:"",
            list:[]
        }
},
    props:["id"],
    created(){
    this.getcomment(this.pageindex);
},
    methods:{
        getmore(pageindex){
            this.pageindex++;
            this.getcomment(this.pageindex);
        },
        postcomment(){
        if(this.postconent.trim().length<=0){
            Toast("您输入的内容不能为空!");
            return
        }
    var url=common.domain+"/api/postcomment/"+this.id;
    this.$http.post(url,{content:this.postconent},{emulateJSON:true}).then(function(response){
         Toast(response.body.message);
        this.list=[{user_name:"匿名用户",add_time:new Date(),content:this.postconent}].concat(this.list);
        this.postconent="";
    })
},
        getcomment(pageindex){
            pageindex=pageindex|1;
        var url=common.domain+"/api/getcomments/"+this.id+"?pageindex="+pageindex;
        this.$http.get(url).then(function(res){
            var data=res.body;
            if(data.status!=0){
                Toast(data.message);
                return;
            }
            this.list=this.list.concat(data.message);
        })
    }
    }
}

</script>
<style scoped>
/* 1.0 实现提交评论样式 */

#postcomment {
    padding: 5px;
}

.p {
    height: 1px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}


/*2.0 评论列表的样式*/

#list {
    padding: 5px;
}

.title {
    padding: 5px;
    color: #6d6d72;
    font-size: 15px;
    background-color: rgba(0, 0, 0, 0.1);
}
</style>